@keyframes l20 {
  30%,
  70% {
    transform: rotate(0deg);
  }
  49.99% {
    transform: rotate(0.2deg);
  }
  50% {
    transform: rotate(-0.2deg);
  }
}

@keyframes l19 {
  0% {
    text-shadow:
      calc(0 * var(--w)) 0,
      calc(-1 * var(--w)) 0,
      calc(-2 * var(--w)) 0,
      calc(-3 * var(--w)) 0,
      calc(-4 * var(--w)) 0,
      calc(-5 * var(--w)) 0,
      calc(-6 * var(--w)) 0,
      calc(-7 * var(--w)) 0,
      calc(-8 * var(--w)) 0,
      calc(-9 * var(--w)) 0;
  }
  4% {
    text-shadow:
      calc(0 * var(--w)) 0 #ffffffb3,
      calc(-1 * var(--w)) 0,
      calc(-2 * var(--w)) 0,
      calc(-3 * var(--w)) 0,
      calc(-4 * var(--w)) 0,
      calc(-5 * var(--w)) 0,
      calc(-6 * var(--w)) 0,
      calc(-7 * var(--w)) 0,
      calc(-8 * var(--w)) 0,
      calc(-9 * var(--w)) 0;
  }
  8% {
    text-shadow:
      calc(0 * var(--w)) 0 #ffffffb3,
      calc(-1 * var(--w)) 0 #ffffffb3,
      calc(-2 * var(--w)) 0,
      calc(-3 * var(--w)) 0,
      calc(-4 * var(--w)) 0,
      calc(-5 * var(--w)) 0,
      calc(-6 * var(--w)) 0,
      calc(-7 * var(--w)) 0,
      calc(-8 * var(--w)) 0,
      calc(-9 * var(--w)) 0;
  }
  12% {
    text-shadow:
      calc(0 * var(--w)) 0 #ffffffb3,
      calc(-1 * var(--w)) 0 #ffffffb3,
      calc(-2 * var(--w)) 0 #ffffffb3,
      calc(-3 * var(--w)) 0,
      calc(-4 * var(--w)) 0,
      calc(-5 * var(--w)) 0,
      calc(-6 * var(--w)) 0,
      calc(-7 * var(--w)) 0,
      calc(-8 * var(--w)) 0,
      calc(-9 * var(--w)) 0;
  }
  16% {
    text-shadow:
      calc(0 * var(--w)) 0 #ffffffb3,
      calc(-1 * var(--w)) 0 #ffffffb3,
      calc(-2 * var(--w)) 0 #ffffffb3,
      calc(-3 * var(--w)) 0 #ffffffb3,
      calc(-4 * var(--w)) 0,
      calc(-5 * var(--w)) 0,
      calc(-6 * var(--w)) 0,
      calc(-7 * var(--w)) 0,
      calc(-8 * var(--w)) 0,
      calc(-9 * var(--w)) 0;
  }
  20% {
    text-shadow:
      calc(0 * var(--w)) 0 #ffffffb3,
      calc(-1 * var(--w)) 0 #ffffffb3,
      calc(-2 * var(--w)) 0 #ffffffb3,
      calc(-3 * var(--w)) 0 #ffffffb3,
      calc(-4 * var(--w)) 0 #ffffffb3,
      calc(-5 * var(--w)) 0,
      calc(-6 * var(--w)) 0,
      calc(-7 * var(--w)) 0,
      calc(-8 * var(--w)) 0,
      calc(-9 * var(--w)) 0;
  }
  24% {
    text-shadow:
      calc(0 * var(--w)) 0 #ffffffb3,
      calc(-1 * var(--w)) 0 #ffffffb3,
      calc(-2 * var(--w)) 0 #ffffffb3,
      calc(-3 * var(--w)) 0 #ffffffb3,
      calc(-4 * var(--w)) 0 #ffffffb3,
      calc(-5 * var(--w)) 0 #ffffffb3,
      calc(-6 * var(--w)) 0,
      calc(-7 * var(--w)) 0,
      calc(-8 * var(--w)) 0,
      calc(-9 * var(--w)) 0;
  }
  28% {
    text-shadow:
      calc(0 * var(--w)) 0 #ffffffb3,
      calc(-1 * var(--w)) 0 #ffffffb3,
      calc(-2 * var(--w)) 0 #ffffffb3,
      calc(-3 * var(--w)) 0 #ffffffb3,
      calc(-4 * var(--w)) 0 #ffffffb3,
      calc(-5 * var(--w)) 0 #ffffffb3,
      calc(-6 * var(--w)) 0 #ffffffb3,
      calc(-7 * var(--w)) 0,
      calc(-8 * var(--w)) 0,
      calc(-9 * var(--w)) 0;
  }
  32% {
    text-shadow:
      calc(0 * var(--w)) 0 #ffffffb3,
      calc(-1 * var(--w)) 0 #ffffffb3,
      calc(-2 * var(--w)) 0 #ffffffb3,
      calc(-3 * var(--w)) 0 #ffffffb3,
      calc(-4 * var(--w)) 0 #ffffffb3,
      calc(-5 * var(--w)) 0 #ffffffb3,
      calc(-6 * var(--w)) 0 #ffffffb3,
      calc(-7 * var(--w)) 0 #ffffffb3,
      calc(-8 * var(--w)) 0,
      calc(-9 * var(--w)) 0;
  }
  36% {
    text-shadow:
      calc(0 * var(--w)) 0 #ffffffb3,
      calc(-1 * var(--w)) 0 #ffffffb3,
      calc(-2 * var(--w)) 0 #ffffffb3,
      calc(-3 * var(--w)) 0 #ffffffb3,
      calc(-4 * var(--w)) 0 #ffffffb3,
      calc(-5 * var(--w)) 0 #ffffffb3,
      calc(-6 * var(--w)) 0 #ffffffb3,
      calc(-7 * var(--w)) 0 #ffffffb3,
      calc(-8 * var(--w)) 0 #ffffffb3,
      calc(-9 * var(--w)) 0;
  }
  40%,
  60% {
    text-shadow:
      calc(0 * var(--w)) 0 #ffffffb3,
      calc(-1 * var(--w)) 0 #ffffffb3,
      calc(-2 * var(--w)) 0 #ffffffb3,
      calc(-3 * var(--w)) 0 #ffffffb3,
      calc(-4 * var(--w)) 0 #ffffffb3,
      calc(-5 * var(--w)) 0 #ffffffb3,
      calc(-6 * var(--w)) 0 #ffffffb3,
      calc(-7 * var(--w)) 0 #ffffffb3,
      calc(-8 * var(--w)) 0 #ffffffb3,
      calc(-9 * var(--w)) 0 #ffffffb3;
  }
  64% {
    text-shadow:
      calc(0 * var(--w)) 0,
      calc(-1 * var(--w)) 0 #ffffffb3,
      calc(-2 * var(--w)) 0 #ffffffb3,
      calc(-3 * var(--w)) 0 #ffffffb3,
      calc(-4 * var(--w)) 0 #ffffffb3,
      calc(-5 * var(--w)) 0 #ffffffb3,
      calc(-6 * var(--w)) 0 #ffffffb3,
      calc(-7 * var(--w)) 0 #ffffffb3,
      calc(-8 * var(--w)) 0 #ffffffb3,
      calc(-9 * var(--w)) 0 #ffffffb3;
  }
  68% {
    text-shadow:
      calc(0 * var(--w)) 0,
      calc(-1 * var(--w)) 0,
      calc(-2 * var(--w)) 0 #ffffffb3,
      calc(-3 * var(--w)) 0 #ffffffb3,
      calc(-4 * var(--w)) 0 #ffffffb3,
      calc(-5 * var(--w)) 0 #ffffffb3,
      calc(-6 * var(--w)) 0 #ffffffb3,
      calc(-7 * var(--w)) 0 #ffffffb3,
      calc(-8 * var(--w)) 0 #ffffffb3,
      calc(-9 * var(--w)) 0 #ffffffb3;
  }
  72% {
    text-shadow:
      calc(0 * var(--w)) 0,
      calc(-1 * var(--w)) 0,
      calc(-2 * var(--w)) 0,
      calc(-3 * var(--w)) 0 #ffffffb3,
      calc(-4 * var(--w)) 0 #ffffffb3,
      calc(-5 * var(--w)) 0 #ffffffb3,
      calc(-6 * var(--w)) 0 #ffffffb3,
      calc(-7 * var(--w)) 0 #ffffffb3,
      calc(-8 * var(--w)) 0 #ffffffb3,
      calc(-9 * var(--w)) 0 #ffffffb3;
  }
  76% {
    text-shadow:
      calc(0 * var(--w)) 0,
      calc(-1 * var(--w)) 0,
      calc(-2 * var(--w)) 0,
      calc(-3 * var(--w)) 0,
      calc(-4 * var(--w)) 0 #ffffffb3,
      calc(-5 * var(--w)) 0 #ffffffb3,
      calc(-6 * var(--w)) 0 #ffffffb3,
      calc(-7 * var(--w)) 0 #ffffffb3,
      calc(-8 * var(--w)) 0 #ffffffb3,
      calc(-9 * var(--w)) 0 #ffffffb3;
  }
  80% {
    text-shadow:
      calc(0 * var(--w)) 0,
      calc(-1 * var(--w)) 0,
      calc(-2 * var(--w)) 0,
      calc(-3 * var(--w)) 0,
      calc(-4 * var(--w)) 0,
      calc(-5 * var(--w)) 0 #ffffffb3,
      calc(-6 * var(--w)) 0 #ffffffb3,
      calc(-7 * var(--w)) 0 #ffffffb3,
      calc(-8 * var(--w)) 0 #ffffffb3,
      calc(-9 * var(--w)) 0 #ffffffb3;
  }
  84% {
    text-shadow:
      calc(0 * var(--w)) 0,
      calc(-1 * var(--w)) 0,
      calc(-2 * var(--w)) 0,
      calc(-3 * var(--w)) 0,
      calc(-4 * var(--w)) 0,
      calc(-5 * var(--w)) 0,
      calc(-6 * var(--w)) 0 #ffffffb3,
      calc(-7 * var(--w)) 0 #ffffffb3,
      calc(-8 * var(--w)) 0 #ffffffb3,
      calc(-9 * var(--w)) 0 #ffffffb3;
  }
  88% {
    text-shadow:
      calc(0 * var(--w)) 0,
      calc(-1 * var(--w)) 0,
      calc(-2 * var(--w)) 0,
      calc(-3 * var(--w)) 0,
      calc(-4 * var(--w)) 0,
      calc(-5 * var(--w)) 0,
      calc(-6 * var(--w)) 0,
      calc(-7 * var(--w)) 0 #ffffffb3,
      calc(-8 * var(--w)) 0 #ffffffb3,
      calc(-9 * var(--w)) 0 #ffffffb3;
  }
  92% {
    text-shadow:
      calc(0 * var(--w)) 0,
      calc(-1 * var(--w)) 0,
      calc(-2 * var(--w)) 0,
      calc(-3 * var(--w)) 0,
      calc(-4 * var(--w)) 0,
      calc(-5 * var(--w)) 0,
      calc(-6 * var(--w)) 0,
      calc(-7 * var(--w)) 0,
      calc(-8 * var(--w)) 0 #ffffffb3,
      calc(-9 * var(--w)) 0 #ffffffb3;
  }
  96% {
    text-shadow:
      calc(0 * var(--w)) 0,
      calc(-1 * var(--w)) 0,
      calc(-2 * var(--w)) 0,
      calc(-3 * var(--w)) 0,
      calc(-4 * var(--w)) 0,
      calc(-5 * var(--w)) 0,
      calc(-6 * var(--w)) 0,
      calc(-7 * var(--w)) 0,
      calc(-8 * var(--w)) 0,
      calc(-9 * var(--w)) 0 #ffffffb3;
  }
  100% {
    text-shadow:
      calc(0 * var(--w)) 0,
      calc(-1 * var(--w)) 0,
      calc(-2 * var(--w)) 0,
      calc(-3 * var(--w)) 0,
      calc(-4 * var(--w)) 0,
      calc(-5 * var(--w)) 0,
      calc(-6 * var(--w)) 0,
      calc(-7 * var(--w)) 0,
      calc(-8 * var(--w)) 0,
      calc(-9 * var(--w)) 0;
  }
}

.loader {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.icon {
  margin-bottom: 20px;
  height: 60px;
  aspect-ratio: 1;
  position: relative;
}

.icon::before,
.icon::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  transform-origin: bottom;
}

.icon::after {
  background:
    radial-gradient(at 75% 15%, #fffb, #0000 35%),
    radial-gradient(at 80% 40%, #0000, #0008),
    radial-gradient(circle 5px, #fff 94%, #0000),
    radial-gradient(circle 10px, #000 94%, #0000),
    linear-gradient(#f93318 0 0) top / 100% calc(50% - 5px),
    linear-gradient(#fff 0 0) bottom/100% calc(50% - 5px) #000;
  background-repeat: no-repeat;
  animation: l20 1s infinite cubic-bezier(0.5, 120, 0.5, -120);
}

.icon::before {
  background: #ddd;
  filter: blur(8px);
  transform: scaleY(0.4) translate(-13px, 0px);
}

.text {
  --w: 10ch;
  font-weight: bold;
  font-family: monospace;
  font-size: 30px;
  line-height: 1.2em;
  letter-spacing: var(--w);
  width: var(--w);
  overflow: hidden;
  white-space: nowrap;
  color: #0000;
  animation: l19 2s infinite linear;
}

.text:before {
  content: 'Loading...';
}
